import React, { memo,useEffect,useRef } from 'react'
import { Carousel } from 'antd';
import chunk from "lodash/chunk";
import { useDispatch,useSelector,shallowEqual } from "react-redux";

import HjThemeHeaderRCM from "@/components/theme-header-rcm";
import HjAlbumCover from "@/components/album-cover";
import { getNewAlbumsAction } from "../../store/actionCreator";
import { NewAlbumdWrapper } from "./style";


export default memo(function HjNewAlbum() {
// state

// redux hook
const dispatch = useDispatch()
const {newAlbums} = useSelector(state => ({//总state
  newAlbums:state.getIn(['recommend','newAlbums'])
}),shallowEqual)

// other hook
useEffect(() => {
  dispatch(getNewAlbumsAction(10))
}, [dispatch]);

const albumRef = useRef()

const newAlbums2 = chunk(newAlbums,5)

  return (
    <NewAlbumdWrapper>
      <HjThemeHeaderRCM title="新碟上架" />
      <div className="content">
          <button className="arrow arrow-left sprite_02" onClick={e=>albumRef.current.prev()}></button>
          <div className="album">
               <Carousel  dots={false} ref={albumRef} >
                      {
                        newAlbums2.map((item,index)=>{
                          return (
                              <div  key={item} className="page">
                                {
                                  item.map((iten,index)=>{
                                    return (
                                      <HjAlbumCover key={iten.id} 
                                                    info={iten}
                                                    size={100} 
                                                    width={118} 
                                                    bgp="-570px"/>
                                    )
                                  })
                                }
                              </div>
                          )
                        })
                      }
               </Carousel>,
          </div>
          <button className="arrow arrow-right sprite_02" onClick={e=>albumRef.current.next()}></button>
      </div>
     
    </NewAlbumdWrapper>
  )
})
